<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="container">
          <el-button size="small" @click="showAdd" type="primary"
            >添加广告</el-button
          >
        </div>
        <!-- <router-link :to="{path: roterPre +'/cms/article/addArticle'}">
        </router-link> -->
      </div>
      <el-table
        v-loading="listLoading"
        :data="tableData.data"
        style="width: 100%"
        size="small"
      >
        <el-table-column label="标题" prop="name" min-width="180" />

        <el-table-column label="素材图片" width="300" prop="image">
          <template slot-scope="scope">
            <div class="demo-image__preview">
              <el-image
                :key="n"
                style="width: 66px; height: 66px; margin: 0 5px"
                :src="scope.row.image_link"
                :preview-src-list="[scope.row.image_link]"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="链接" width="300" prop="extend">
        </el-table-column>

        <el-table-column prop="status" label="是否显示" min-width="100">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.status == 1">显示</el-tag>
            <el-tag type="danger" v-else>隐藏</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="100" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="onEdit(scope.row)"
              >修改</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog
      v-if="visible"
      title="新增广告"
      :visible.sync="visible"
      width="900px"
    >
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="ruleValidate"
        label-width="120px"
      >

      <el-form-item label="标题" prop="name">
            <el-input
              v-model="ruleForm.name"
              size="small"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="content">
            <el-input
              v-model="ruleForm.content"
              type="textarea"
              size="small"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        <el-form-item label="是否显示">
          <el-radio-group v-model="ruleForm.status">
            <el-radio :label="1" class="radio">显示</el-radio>
            <el-radio :label="0">不显示</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item

          label="广告链接："
          prop="extend"
        >
          <el-input
            v-model="ruleForm.extend"
            size="small"
            placeholder="请输入正确跳转路径"
          ></el-input>
        </el-form-item>


            <el-form-item label="图文封面：" prop="image_link">
              <div class="upLoadPicBox" @click="modalPicTap('1')">
                <div v-if="ruleForm.image_link " class="pictrue"><img :src="ruleForm.image_link "></div>
                <div v-else class="upLoad">
                  <i class="el-icon-camera cameraIconfont" />
                </div>
              </div>
            </el-form-item>

      </el-form>
      <div slot="footer">
        <el-button @click="cancel">取消</el-button>
        <el-button
          type="primary"
          @click="submit('ruleForm')"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
// +----------------------------------------------------------------------
// | jufeiniu [蓝港AI-好用又快]
// +----------------------------------------------------------------------
// | Copyright (c) 2023 https://jufeiniu.com/ All rights reserved.
// +----------------------------------------------------------------------
// | Author: 巨说还行-乔欣弥弥-巨肥牛 <jufeiniu@163.com>
// +----------------------------------------------------------------------
// | Personal site: https://jufeiniu.com/
// +----------------------------------------------------------------------
import { getGptsyInfo, createGptsyInfos,articleDeleApi, articleStatusApi } from "@/api/cms";
import {
  communityListApi,
  communityStatusApi,
  communityUpdateApi,
  communityAuditApi,
  communityDetailApi,
  communityDeleteApi,
  communityOffApi,
  communityCateOptionApi,
  communityTopicOptionApi,
  communityTitleApi,
} from "@/api/community";
import { roterPre } from "@/settings";
export default {
  name: "Article",
  data() {
    return {
      roterPre: roterPre,
      tableFrom: {
        id: "",
        level: 10,
        status: "",
        type_name: "",
      },
      tableData: {
        data: [],
        total: 0,
      },
      ruleForm: {
        id: 0,
        pinyin: "",
        name: "",
        icons_info: "",
        image_link: "",
        video_link: "",
        is_show: 0,
        status: 0,
        cate_id: 0,
        extend: "",
        type: 0,
        sort: 0,
        type_name: "",
        content: null,
        level: 10,
      },
      visible:false,
      ruleValidate: {
        name: [{ required: true, message: "请输入", trigger: "blur" }],
        extend: [{ required: true, message: "请输入", trigger: "blur" }],
        image_link: [{ required: true, message: "请上传封面图", trigger: "blur" }],

      },
      listLoading: true,
    };
  },
  mounted() {
    this.getList("");
  },
  methods: {
    // 列表
    getList(num) {
      this.listLoading = true;
      getGptsyInfo(this.tableFrom)
        .then((res) => {
          console.log(res);
          this.tableData.data = res.data.data;
          this.tableData.total = res.data.count;
          this.listLoading = false;
        })
        .catch((res) => {
          this.listLoading = false;
          this.$message.error(res.message);
        });
    },
    modalPicTap(tit) {
      const _this = this
      this.$modalUpload(function(img) {
        _this.ruleForm.image_link = img[0]
      }, tit)
    },
    showAdd() {
      this.ruleForm = {
        id: 0,
        pinyin: "",
        name: "",
        icons_info: "",
        image_link: "",
        video_link: "",
        is_show: 0,
        status: 0,
        cate_id: 0,
        extend: "",
        type: 0,
        sort: 0,
        type_name: "",
        content: null,
        level: 10,
      };
      this.visible = true;
    },
    onEdit(row){
      this.ruleForm=row
      this.visible=true
    },
    cancel(){
      this.visible=false
    },
    submit(){

       this.$refs['ruleForm'].validate((valid) => {
        if(valid){
          this.ruleForm.type_name = this.ruleForm.name
          this.ruleForm.level=10
          createGptsyInfos(this.ruleForm).then(res=>{
            this.$message.success('操作成功')
            this.visible=false
            this.getList()
          })
        }
       })
    }
  },
};
</script>

<style scoped lang="scss">
.selWidth {
  width: 350px;
}
</style>
